Zumiez "Build a Custom Skateboard" Case Study
Challenge: Improve custom skateboard builder flow.
Role: UI/UX Designer
What is Zumiez "Build a Custom Skateboard"?
Zumiez, a specialty retailer for young men and women, offers a package to choose all the parts to customize a skateboard at a discounted price. You need to select all 6 items to be able to add them to your shopping bag to save money.
Project goals:
• Create a more visual layout focusing on the end product.
• Making images clickable and adding text links for easier selection, removal, and editing.
• Keeping the user in context when filtering and sorting a category.
Process:
• Researched websites and flows that add multiple items or features to a package.
• Understand the Zumiez customer and created a user profile.
• Synthesized my research and brainstormed in FigJam, identified pain points, and user flow.
• Created rough sketches with pen and paper, followed by wireframes, and hi-fi designs in Figma.
Research:
• Each page in the flow opens with all relevant information below the fold.
• Confusing as to where to see what you're adding to package.
• User cannot edit or remove an item easily once it has been added.
• Filters are not consistent across screen sizes, nor easily recognizable as part of product search.
FigJam Board
Synthesizing research, brainstorming, creating user profile, analyzing the user flow, and identifying pain points in the user's experience.
Summary of changes implemented in this redesign:
• Created a more visual layout focusing on the end product of building a skateboard package.
• Made the images clickable and added text links for easier product selection, removal, and editing.
• Increased the real estate of the filter and sort by keeping them in context with the modal.
Conclusion:
This redesign of the "Build a Custom Skateboard" section of the Zumiez website attempts to create consistency and ease of use. To improve the UX by keeping the user in context throughout the flow, giving the user the ability to edit, easily see their selections, and a real-time price tally.
Note: I do not work for, nor am I affiliated with Zumiez. This is a UI/UX case study to explore products I love and how to make them even better.
Thank you for viewing!
Feel free to leave a comment. I would love to know your feedback!
Cathy Villamar
UI/UX Designer | Illustrator
